<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-input placeholder="输入文件ID查询" size='small' v-model="KeyWord"/>
        <el-button size='small' class="LeftBotton" :icon="Search" @click="Query()"></el-button>
      </el-header>
      <el-main>
        <el-table height="100%" :data="State?List:QueryList" style="width: 100% height:100%">
          <el-table-column fixed prop="id" label="文件ID" width="150" height="80" />
          <el-table-column prop="name" label="创建/执行人" width="180" height="80">
            <template #default="scope">
                <el-tag>{{ scope.row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="创建/执行时间" width="180" height="80" />
          <el-table-column prop="state" label="所在位置" width="180" height="80">
            <template v-slot="{ row: { state } }">
              <div v-my-directive="state" />
            </template>
          </el-table-column>
          <el-table-column prop="FileName" label="文件类型" width="150" height="80" />
          <el-table-column prop="zip" label="文件格式" width="180" height="80" />
          <el-table-column prop="state" fixed="right" label="操作" width="180" height="80">
            <template v-slot="{ row: { state } }">
              <el-button link type="primary" size="small" v-if="state">恢复</el-button>
              <el-button link type="primary" size="small" v-else>删除</el-button>
              <el-button link type="primary" size="small">下载</el-button>
              <el-button link type="primary" size="small">打开</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import DeleteAll from './Data/DeleteList'
import FileAll from './Data/Array'
import FileList from './Data/Enumerate'
import {
  Search,
} from '@element-plus/icons-vue'
//一般状态数组
const List:Ref<Array<FileList>> = ref([])
//查询状态数组
const QueryList:Ref<Array<FileList>> = ref([])
//切换一般状态和查询状态
const State = ref(true)
//关键字
const KeyWord = ref()
onMounted: {
  List.value = [...DeleteAll, ...FileAll]
  console.log(State.value?List.value:QueryList.value,State.value);

}
const vMyDirective = {
  beforeMount: (el:any, { value }):void => {
    let text = value ? 'Recycle' : 'Warehouse'
    // console.log(el);
    let obj = {
      Recycle: { cls: 'product-Recycle', Text: '回收站' },
      Warehouse: { cls: 'product-Warehouse', Text: '资料库' },
    }
    el.setAttribute('class', obj[text].cls)
    // console.log(value, text);
    el.innerHTML = obj[text].Text
  }
}
const Query =()=>{
  State.value = !State.value
}
</script>
<style lang="less" scoped>
.common-layout {
  display: block;
  position: relative;
  height: 673.6px;
  background: white;
  // overflow: auto;
  // text-align: center;

  >.el-container {
    display: block;
    position: relative;
    height: 100%;
    background: white;
    // overflow: hidden;

    >footer,
    >main,
    >header {
      // height: 48px;
      padding: 8px 12px;
      height: 100%;
    }

    >footer,
    >header {
      text-align: right;
      background-color: white;
      // border-bottom: 1px solid rgb(181, 178, 178);
    }

    >header {
      border-bottom: solid 2px #ddd;
      height: 64px;
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;

      >p {
        color: rgb(223, 11, 11);
        font-size: 16px;
        float: right;
      }

      .el-input {
        width: 150px;
        height: 80%;
        // margin-right: 18px;
      }

      >.el-button {
        height: 80%;
        margin-right: 100px;
      }
    }

    >footer {
      border-top: solid 1px #ddd;
      height: 48px;

      >.el-pagination {
        float: right;
      }

      >.demo-pagination-block {
        height: 100%;
        line-height: 100%;

        >.el-pagination {
          display: flex;
          flex-direction: row;
          justify-content: end;
          padding-right: 15px;
        }
      }
    }

    >main {
      height: calc(100% - 48px - 64px);

      // overflow: hidden;
      // overflow-x: hidden;
      // overflow-y: hidden;
      &.no-footer {
        height: calc(100% - 64px);
      }

      >.el-table {
        height: calc(100%-16px);
      }
    }
  }
}

.product-Recycle {
  color: red;
}
</style>